<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let a = 1;
      // setTimeout 也可以运行在 setTimeout 里面   （回调）嵌套
      // 每一个回调里面，取的都是a
      // 函数内部，可以访问外部变量的引用 —— 函数作用域

      // 嵌套层数深了，很难发现，变量冲突 丢失了 封装性
      // 回调地狱 callback hell                            、
      setTimeout(() => {
        // 一秒后运行
        a++;
        console.log(a);
        const b = 1;
        setTimeout(() => {
          // 一秒后运行
          a++;
          console.log(a);
          setTimeout(() => {
            // 一秒后运行
            a++;
            console.log(a);
            setTimeout(() => {
              // 一秒后运行
              a++;
              console.log(a);
              setTimeout(() => {
                // 一秒后运行
                a++;
                console.log(a);
                setTimeout(() => {
                  // 一秒后运行
                  a++;
                  console.log(a);
                  setTimeout(() => {
                    // 一秒后运行
                    a++;
                    console.log(a);
                    setTimeout(() => {
                      // 一秒后运行
                      a++;
                      console.log(a);
                      b = 2;
                    }, 10);
                  }, 10);
                }, 10);
              }, 10);
            }, 10);
          }, 10);
        }, 10);
      }, 10);

      // 自己实现回调，把函数当做参数传递
      function test(cb) {
        setTimeout(() => {
          cb();
        }, 10);
      }
      test(() => {
        test(() => {});
      });
      // 链式调用
      function test2() {
        return {
          then: (cb) => {
            return cb();
          },
        };
      }
      test2().then(test2).then();
    </script>
  </body>
</html>
